<template>
    <nav class="nav" :class="{ 'nav--transparent': isTransparent }">
      <!-- 顶部工具栏 -->
      <div class="nav-top">
        <div class="content">
          <div class="left">
            <!-- 预留时间显示区域
            <span class="current-time">{{ currentTime }}</span> -->
          </div>
          <div class="right">
            <div class="tool-item">
              <img src="@/assets/homeimg/navIcon2.png" alt="手机App" />
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  <div class="qrcode-box">
                    <img :src="$global.foot.qrcode" alt="App二维码" class="qr-img" />
                    <div class="qr-info">
                      <p class="title">斑马中国App</p>
                      <p class="desc">请扫描二维码</p>
                      <p class="desc">下载APP</p>
                    </div>
                  </div>
                </template>
                <span>手机App</span>
              </el-tooltip>
            </div>
            <div class="tool-item">
              <img src="@/assets/homeimg/navIcon4.png" alt="公众号" />
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  <div class="qrcode-box">
                    <img :src="$global.foot.qrcodewx" alt="公众号二维码" class="qr-img" />
                    <div class="qr-info">
                      <p class="title">斑马版权公众号</p>
                      <p class="desc">请扫描二维码</p>
                      <p class="desc">进入斑马版权公众号</p>
                    </div>
                  </div>
                </template>
                <span>斑马版权公众号</span>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 主导航栏 -->
      <div class="nav-banner">
        <div class="inner">
          <div class="logo-box">
            <img src="@/assets/homeimg/blogo.png" alt="Logo" @click="toHome" />
          </div>
          
          <div class="nav-content">
            <div class="nav-box">
              <el-menu 
                :default-active="menuIndex" 
                mode="horizontal" 
                class="el-menu-demo"
                :background-color="isTransparent ? 'transparent' : '#333'"
                text-color="#fff"
                active-text-color="#53b7d7"
                :router="true"
              >
                <!-- 首页菜单项 -->
                <el-menu-item index="/" @click="handleSelect({path: '/'})">
                  <span>首页</span>
                </el-menu-item>
                
                <!-- 版权登记下拉菜单 -->
                <el-sub-menu index="/copyright-registration">
                  <template #title>版权登记</template>
                  <el-menu-item 
                    index="/copyright-registration"
                    @click="handleSelect({path: '/copyright-registration'})"
                  >
                    作品著作权登记
                  </el-menu-item>
                  <el-menu-item 
                    index="/app-copyright-registration"
                    @click="handleSelect({path: '/app-copyright-registration'})"
                  >
                    软件著作权登记
                  </el-menu-item>
                </el-sub-menu>
                
                <!-- 其他一级菜单项 -->
                <template v-for="item in otherMenuItems" :key="item.path">
                  <el-menu-item 
                    :index="item.path"
                    @click="handleSelect(item)"
                  >
                    <span>{{ item.title }}</span>
                  </el-menu-item>
                </template>
              </el-menu>
            </div>
  
            <div class="auth-buttons" v-if="!isLoggedIn">
              <el-button 
                class="login-btn" 
                type="text"
                @click="goToLogin('login')"
              >
                登录
              </el-button>
              <el-button 
                class="register-btn" 
                type="primary" 
                @click="goToLogin('register')"
              >
                注册
              </el-button>
            </div>
  
            <div class="user-avatar" v-else>
              <el-dropdown @command="handleCommand">
                <span class="avatar">
                  <img src="@/assets/homeimg/grzx.png" alt="用户头像" />
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="self">个人中心</el-dropdown-item>
                    <el-dropdown-item command="copyrightListing">存证列表</el-dropdown-item>
                    <el-dropdown-item command="exit">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </template>
  
  <script>
  import { defineComponent, ref, computed, onMounted, onUnmounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useStore } from 'vuex'
  
  export default defineComponent({
    name: 'ServiceNav',
  
    setup() {
      const router = useRouter()
      const route = useRoute()
      const store = useStore()
  
      // 登录状态
      const isLoggedIn = computed(() => store.getters.isLoggedIn)
      
      // 当前时间显示
      const currentTime = ref('')
      const updateTime = () => {
        const now = new Date()
        const hours = String(now.getHours()).padStart(2, '0')
        const minutes = String(now.getMinutes()).padStart(2, '0')
        currentTime.value = `${hours}:${minutes}`
      }
      
      let timeInterval = null
      
      onMounted(() => {
        updateTime()
        timeInterval = setInterval(updateTime, 60000) // 每分钟更新
      })
      
      onUnmounted(() => {
        if (timeInterval) clearInterval(timeInterval)
      })
  
      // 选中的菜单项
      const menuIndex = ref(route.path)
  
      // 除版权登记外的其他菜单项
      const otherMenuItems = [
        { title: '版权市场', path: '/copyright-market' },
        { title: '芝麻AI', path: '/zhima-ai' },
        { title: '解决方案', path: '/solutions' },
        { title: '关于我们', path: '/about-us' }
      ]
  
      // 菜单选择处理
      const handleSelect = (item) => {
        if (item.path) {
          router.push(item.path)
        }
      }
  
      // 下拉命令处理
      const handleCommand = (command) => {
        const serviceMap = {
          // 版权服务
          'evidence': '/copyrightRegistration/evidence',
          'register': '/copyrightRegistration/register',
          'monitoring': '/copyrightRegistration/monitor',
          'electronic': '/copyrightRegistration/forensics',
          'online': '/copyrightMaintain/judicial',
          'prove': '/copyrightMaintain/law',
          
          // 关于我们
          'platform': '/aboutUs/detail',
          'news': '/aboutUs/newsCenter',
          'state': '/aboutUs/userAgreementtwo/1',
          
          // 用户相关
          'self': '/user',
          'copyrightListing': '/user/copyrightlist',
          'exit': '/'
        }
        
        if (command === 'exit') {
          store.dispatch('logout')
        }
        
        if (serviceMap[command]) {
          router.push(serviceMap[command])
        }
      }
  
      // 返回首页
      const toHome = () => {
        router.push('/')
      }
  
      // 登录/注册
      const goToLogin = (type) => {
        router.push({
          path: '/login',
          query: { status: type, redirect: route.fullPath }
        })
      }
  
      // 判断当前页面是否需要透明导航
      const isTransparent = computed(() => {
        return route.path === '/' || route.path === '/home'; // 这里可以根据需要调整
      })
  
      return {
        isLoggedIn,
        isTransparent,
        currentTime,
        menuIndex,
        otherMenuItems,
        handleSelect,
        handleCommand,
        toHome,
        goToLogin
      }
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .nav {
    width: 100%;
    color: #fff;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    
    // 导航顶部工具栏 - 永远不透明
    .nav-top {
      width: 100%;
      height: 30px;
      background-color: #000000; // 改为纯黑色，不透明
      
      .content {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        
        .left {
          .current-time {
            color: #ccc;
          }
        }
        
        .right {
          display: flex;
          gap: 20px;
          
          .tool-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            
            img {
              width: 16px;
              height: 16px;
              margin-right: 5px;
            }
            
            span {
              color: #ccc;
              
              &:hover {
                color: #fff;
              }
            }
          }
        }
      }
    }
    .nav-banner{
      background-color: rgba(0, 0, 0, 0.8);
      height: 90px;
      width: 100%;
      margin-left: 0%; 
      margin-right: 0%;
      margin-top: 0%;
    }
    // 主导航栏 - 可以半透明
    .inner {
      width: 1200px;
      height: 80px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // 背景色通过navStyle动态控制
      
      .logo-box {
        width: 300px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        img {
          height: 50px;
          cursor: pointer;
          transition: transform 0.3s ease;
          
          &:hover {
            transform: scale(1.05);
          }
        }
      }
      
      .nav-content {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 30px;
        
        .nav-box {
          flex: 1;
          
          :deep(.el-menu) {
            border-bottom: none;
            display: flex;
            justify-content: center;
            background-color: transparent;
            
            .el-menu-item, .el-sub-menu__title {
              color: #fff;
              font-size: 16px;
              font-weight: 500;
              height: 80px;
              line-height: 80px;
              transition: all 0.3s ease;
              
              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 0;
                height: 2px;
                background-color: #53b7d7;
                transition: all 0.3s ease;
              }
              
              &:hover::after {
                width: 70%;
                left: 15%;
              }
            }
            
            .el-menu-item.is-active,
            .el-sub-menu.is-active .el-sub-menu__title {
              border-bottom: none !important;
              
              &::after {
                width: 70%;
                left: 15%;
              }
            }
            
            .el-menu-item.is-active::before {
              display: none !important;
            }
          }
        }
        
        .auth-buttons {
          display: flex;
          gap: 15px;
          align-items: center;
          
          .login-btn {
            color: #fff;
            
            &:hover {
              color: #53b7d7;
            }
          }
          
          .register-btn {
            padding: 8px 24px;
            border-radius: 16px;
            font-size: 14px;
            background: #53b7d7;
            border-color: #53b7d7;
            transition: all 0.3s ease;
            
            &:hover {
              background: #ffffff;
              color: #53b7d7;
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(83, 183, 215, 0.2);
            }
          }
        }
        
        .user-avatar {
          margin-left: 20px;
          
          .avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            
            img {
              width: 22px;
              height: 22px;
            }
            
            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: translateY(-2px);
            }
          }
        }
      }
    }
  }
  
  // 透明导航样式
  .nav--transparent {
    .nav-top {
      background-color: #000000; // 改为纯黑色不透明
    }
    
    .inner {
      // 背景色通过navStyle动态控制
    }
  }
  
  // 二维码弹窗样式
  .qrcode-box {
    display: flex;
    padding: 15px;
    
    .qr-img {
      width: 100px;
      height: 100px;
    }
    
    .qr-info {
      margin-left: 15px;
      
      .title {
        color: #53b7d7;
        font-size: 16px;
        font-weight: 500;
      }
      
      .desc {
        margin-top: 8px;
        font-size: 12px;
        color: #606266;
      }
    }
  }
  
  // 下拉菜单样式
  :deep(.nav-submenu) {
    background-color: rgba(0, 0, 0, 0.9);
    border: none;
    padding: 5px 0;
    min-width: 120px;
    
    .el-menu-item {
      height: 40px;
      line-height: 40px;
      color: #ffffff;
      padding: 0 20px;
      text-align: center;
      font-size: 14px;
      
      &:hover {
        background-color: rgba(83, 183, 215, 0.2);
        color: #53b7d7;
      }
      
      &.is-active {
        background-color: rgba(83, 183, 215, 0.2);
        color: #53b7d7;
        border-bottom: none !important;
      }
    }
    
    .popper__arrow {
      display: none;
    }
  }
  
  // 响应式设计
  @media screen and (max-width: 1200px) {
    .nav {
      .nav-top .content,
      .inner {
        width: 100%;
        padding: 0 20px;
      }
      
      .nav-content .nav-box :deep(.el-menu) {
        justify-content: flex-start;
        
        .el-menu-item, .el-sub-menu__title {
          padding: 0 15px;
        }
      }
    }
  }
  
  @media screen and (max-width: 768px) {
    .nav {
      .nav-top {
        display: none;
      }
      
      .inner {
        height: 60px;
        
        .logo-box {
          width: 200px;
          
          img {
            height: 40px;
          }
        }
        
        .nav-content {
          .nav-box {
            display: none;
          }
          
          .auth-buttons {
            .login-btn {
              display: none;
            }
            
            .register-btn {
              padding: 6px 15px;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  
  // 添加下拉菜单样式
  :deep(.el-sub-menu) {
    .el-sub-menu__title {
      color: #ffffff;
      
      &:hover, &:focus {
        background-color: rgba(83, 183, 215, 0.2) !important;
      }
    }
    
    .el-menu--popup {
      background-color: rgba(0, 0, 0, 0.9);
      padding: 5px 0;
      min-width: 160px;
      
      .el-menu-item {
        color: #ffffff;
        text-align: center;
        
        &:hover {
          background-color: rgba(83, 183, 215, 0.2);
          color: #53b7d7;
        }
        
        &.is-active {
          background-color: rgba(83, 183, 215, 0.2);
          color: #53b7d7;
          border-bottom: none !important;
        }
      }
    }
  }
  </style> 